<template>
  <div>
    <div class="breadcrumb-area pt-95 pb-95 bg-img" style="background-image:url(static/picture/banner-2.jpg);">
      <div class="container">
        <div class="breadcrumb-content text-center">
          <h2>Orders</h2>
          <ul>
            <li><router-link to="/">home</router-link></li>
            <li class="active">Check Order</li>
          </ul>
        </div>
      </div>
    </div><!-- shopping-cart-area start -->
    <div class="cart-main-area pt-95 pb-100">
      <div class="container">
        <h3 class="page-title">Your cart items</h3>
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-12">
            <form action="#">
              <div class="table-content table-responsive">
                <table>
                  <thead>
                  <tr>
                    <th>Image</th>
                    <th>Product Name</th>
                    <th>Unit Price</th>
                    <th>Quantity</th>
                    <th>Total Price</th>
                    <th>Delete</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="order in checkOrderList">
                    <td class="product-thumbnail">
                      <router-link :to="{name:'viewItem',query:{itemId:order.itemId,productId:order.productId,catId:order.categoryId}}">
                        <img :src="order.iImage" alt="">
                      </router-link>
                    </td>
                    <td class="product-name">
                      <router-link :to="{name:'viewItem',query:{itemId:order.itemId,productId:order.productId,catId:order.categoryId}}">
                      {{order.iName}}
                      </router-link>
                    </td>
                    <td class="product-price-cart">${{order.listPrice}}</td>
                    <td class="product">{{order.qty}}</td>
                    <td class="product">${{order.total}}</td>
                    <td class="product-remove" ><i class="ti-trash" @click="removeItem(order.itemId)"></i></td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <div class="row">
                <div class="col-lg-12">
                  <div class="cart-shiping-update-wrapper">
                    <div class="cart-shiping-update">
                      <router-link :to="index">Continue Shopping</router-link>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div class="row">
              <div class="col-lg-4 col-md-12">
                <div class="grand-totall">
                  <h5>Grand Total: $ {{allOrderPrice}}</h5>
                  <router-link to="/order/viewNewOrder">Proceed To Checkout</router-link>
                  <p>Checkout with Multiple Addresses</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import checkOrder from "../../../static/js/pet/checkOrder";
export default {
  ...checkOrder

}
</script>

<style scoped>
@import "../../../static/css/bootstrap.min.css";
@import "../../../static/css/animate.css";
@import "../../../static/css/simple-line-icons.css";
@import "../../../static/css/themify-icons.css";
@import "../../../static/css/owl.carousel.min.css";
@import "../../../static/css/slick.css";
@import "../../../static/css/meanmenu.min.css";
@import "../../../static/css/style2.css";
@import "../../../static/css/responsive.css";
</style>
